<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
#parent{width:600px;height:20px;background-color: #ccc;position: relative; margin:20px auto;}
#div1{width:20px;height:20px;background-color: red;position: absolute;left:0;top:0;}
</style>
    <script>
        window.onload=function(){
            var oParent=document.getElementById('parent');
            var oDiv=document.getElementById('div1');
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){//鼠标按下
                var oEvent=ev||event;
//                滚动条只要求横向拖动，不需要纵向拖动，所以可以把纵坐标运动的都删除
                disX=oEvent.clientX-oDiv.offsetLeft;//距离横坐标
                //disY=oEvent.clientY-oDiv.offsetTop;//距离纵坐标

                if(oDiv.releaseCapture){
                    //只在IE下兼容，在这个条件下，执行下面的代码

                    oDiv.onmouseover=mouseMove;//鼠标移动

                    oDiv.onmouseup=mouseUp;//鼠标抬起

                    oDiv.setCapture();//事件捕获，将所有事件都集中在一个div上
                }
                else{
                    //Chrome、FF
                    document.onmouseover=mouseMove;//鼠标移动
                    document.onmouseup=mouseUp;//鼠标抬起
                    return false;// 可以解决Chrome FF IE9,有文字的情况下，但是不能解决IE6-8             解决FF空div出现的bug，通过阻止默认事件
                }


            };
            function mouseMove (ev){//鼠标拖快了，会脱离方块，所以需要加在document                      鼠标移动，鼠标hover
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                //var t=oEvent.clientY-disY;
                if(l<0){//左边
                  l=0;
                }
                else if(l>oParent.offsetWidth-oDiv.offsetWidth){//右边
                    l=oParent.offsetWidth-oDiv.offsetWidth;
                }
                oDiv.style.left=l+'px';
                document.title=l;
                //oDiv.style.top=t+'px';
            }

            function mouseUp(){//鼠标抬起，就需要把前面的事件解除
                this.onmouseover=null;
                this.onmouseup=null;

                if(oDiv.releaseCapture){
                    oDiv.releaseCapture();//解除事件捕获，
                }
            }
        };
    </script>
</head>
<body>
<div id="parent">
    <div id="div1"></div>
</div>
</body>
</html>